<!--
 * @Author: Liu
 * @Date: 2023-05-08 10:51:41
 * @LastEditTime: 2023-05-19 20:40:23
-->

<!--规则 -->
<template>
  <div class="rule-box" v-show="props.isShow">
    <div :class="['rule-inner', 'dialog-inner', props.isShow && 'scale-in-center']">
        <!-- <img src="../../public/images/close.png" alt="" class="close-icon" @click="$emit('handleClose')"> -->
        <!-- <img src="/public/images/rule_box.png" alt="" class="rule_box_data"> -->
        <div class="title">活动规则</div>
        <div class="rule_content">
            <p>
                <b>1、活动时间：</b>2023年10月25日-10月28日
            </p>
            <p>
                <b>2、活动对象：</b>引力域注册用户
            </p>
            <!-- <p>
                <b>3、活动规则：</b>活动期间，车主每日5次投掷骰子机会，根据投掷骰子得出点数，在棋盘格图上移动相应步数，在停留站点有机会触发奖励事件。
            </p> -->
            <!-- <p>
                1.活动期间，车主每日可参与幸运 U 行棋游戏，共五次投掷骰子机会，通过投掷骰子得出点数，在无边界棋盘格图上移动相应步数，在停留站点有机会触发奖励事件;
            </p>
            <p>
                2.棋子停留时，棋盘将随机出现以下奖励事件：<br />
                U 形充能站：获得1-100随机 U 乐值，U 乐值将纳入周度排行，排行TOP100用户会获得额外奖励；<br />
                U 币补给站：获得5-200随机 U 币面额；
                幸运盲盒站：获得对应实体奖励；
                好运加一站：获得额外1次投掷机会。
            </p> -->
            <p>
                <b>3、活动规则：</b>
            </p>
            <p>
                ①活动期间，用户每日可参与U星大富翁游戏，每日2次投掷机会，通过投掷骰子得出点数，在无边界棋盘格图上移动相应的步数，在停留站点触发对应奖励；<br />
                ②棋子停留时，将有机会随机触发以下奖励：<br />
                U币补给站：获得16-10000随机U币面额；<br />
                幸运好礼站：获得随机商城实物奖励；<br />
                ③用户每日分享可额外获得1次投掷机会，即每人每天至多3次投掷机会。<br />
            </p>
            <p>
                <b>4、活动奖品：</b>
            </p>
            <p>
                海量U币（单次最高10000U币）、UNI全自动折叠伞、UNI户外野餐垫、UNI车载香薰杯套装、UNI多用途折叠箱、UNI头枕腰靠。
            </p>
            <p>
                <b>5、奖品兑换规则： </b><br />
                ①U币奖励：实时发放，可前往【我的U币】查看U币到账情况；<br />
                ②实物奖励：活动结束后7个工作日内，系统将为中奖用户发放对应奖品商城代金券，请中奖用户及时领取代金券，并在代金券有效期内前往UNI商城兑换，逾期代金券作废；代金券查看路径：【引力域APP/小程序】-【我的】-【代金券】。
            </p>
            <!-- <p>
                1.代金券需及时领取和兑换，代金券发放后超过兑换期限未兑换,则视为自动放弃该奖品:<br />
                2.实物奖品具体发货时间以 UNI 商城时间为准; 如果中奖用户收到的奖品出现质量问题( 非质量问题不退换 )，可及时与小 U 沟通反馈，官方将为您妥善解决。
            </p> -->
            <p>
                <b>6、注意事项：</b><br />
                ①代金券需及时领取和兑换，超过兑换期限未兑换，则视为自动放弃该奖品；<br />
                ②实物奖品具体发货时间以UNI商城时间为准，如中奖用户收到的奖品出现质量问题（非质量问题不退换），可及时与小U沟通反馈，官方将为您妥善解决。
            </p>
            <p>
                <b>7、活动说明：</b><br />
                活动期间，若用户出现违规行为（如利用黑客工具、软件作弊等），引力域有权取消用户参与资格并收回已发放奖品。
            </p>
        </div>
        <div class="footer">
            <div><div class="btn" role="button" @click="$emit('handleClose')">确&nbsp;&nbsp;认</div></div>
        </div>
    </div>
  </div>
</template>

<script setup>

const props = defineProps({
	isShow:{
		type:Boolean,//类型字符串
		default:false//如果没有传递msg参数,默认值是这个
	},
})


</script>
<style  scoped>
.rule-box{
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.rule-inner{
    width: 643px;
    height: 923px;
    position: relative;
    border-radius: 30px;

}
.rule_box_data{
    width: 100%;
    height: 100%;
}
.close-icon{
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(-130%);
    width: 52px;
    height: 52px;
}
.rule_content{
    position: absolute;
    width: 530px;
    /* height: 640px; */
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    right: 0;

    /* margin: auto; */
    overflow-y: scroll;
    color: #0160a5;
    font-family: "ChangAnunitype-Regular";
    font-size: 26px;
    /* padding-right: 20px; */
    margin-bottom: 40px;
}

.rule_content b {
    font-family: "ChangAnunitype-Bold";
}

.footer > div {
    width: 255px;
    height: 64px;
    margin-bottom: 25px;
    box-shadow: 7px 10px 35px rgba(23, 105, 175, .57);
    border-radius: 50px;
}

/* .rule_content::-webkit-scrollbar {
    width: 10px;
}
.rule_content::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #d55959;
}
.rule_content::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #e7e7e7;
    border: 1px solid #cacaca;
} */

</style>